<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="__STATIC__/js/jquery-3.2.1.min.js"></script>
</head>
<body>

<select id="province">
    <option></option>
</select>
<select id="city">
    <option> </option>
</select>
<select id="sw">
    <option> </option>
</select>
<script>
    $(document).ready(function(){
        fn1();

        function fn1(){
//            var html = '<option>请选择</option>';
            $.ajax({
                type:"post",
                url:"{:URL('Areas/province')}",
                dataType:"json",

                success:function(data){
                    for (var i = 0; i < data.length; i++) {
                        $("#province").append("<option value=" + data[i].areaId + ">" + data[i].areaName + "</option>");
                        console.log(data[i]);
                    }
                }
            });
            $("#province").html('<option>请选择</option>');
            $("#city").html('<option>请选择</option>');

        }
        $("#province").change(function(){
            var shengId = $("#province").val();
//            var html = '<option>选择市</option>';
            $.ajax({
                type:"post",
                url:"{:URL('Areas/city')}",
                dataType:"json",
                data:{areaSort:shengId},
                success:function(data){
                    for (var i = 0; i < data.length; i++) {
                        $("#city").append("<option value=" + data[i].areaId + ">" + data[i].areaName + "</option>");
                    }

                }
            });
            $("#city").html('<option>请选择</option>');
            $("#sw").html('<option>请选择</option>');
        });
        $("#city").change(function(){
            var shiId = $("#city").val();
//            var html = '<option>请选择区</option>';
            $.ajax({
                type:"post",
                url:"{:URL('Areas/sw')}",
                dataType:"json",
                data:{areaSort:shiId},
                success:function(data){
                    for (var i = 0; i < data.length; i++) {
                        $("#sw").append("<option value="  + ">" + data[i].areaName + "</option>");
//                        $("#sw").append("<option value=" + data[i].areaId + ">" + data[i].areaName + "</option>");
                    }
                }
            });



        })
    });

</script>


<a href="{:URL('Areas/province')}">调试</a>
</body>
</html>